<template>
  <section class="text-gray-600 body-font">
    <div
      class="container flex flex-col items-center justify-center px-5 py-24 mx-auto"
    >
      <icon icon="vue" />
      <!--
      <icon
        icon="https://pic2.zhimg.com/80/v2-82f08054fa4b6d0b96ca3169c88a5559_720w.webp"
        :styleName="{ cursor: 'pointer' }"
        @click="onload"
      /> -->

      <!-- <icon
        icon="mdi:abjad-arabic"
        :styleName="{ cursor: 'pointer', width: '6em', height: '6em' }"
        @click="onload"
      /> -->
      <img
        class="animate-bounce-slow object-cover object-center w-5/6 mb-10 rounded md:w-3/6 lg:w-1/3 transition-[width] !duration-300"
        alt="hero"
        src="@/assets/img/not-found.svg"
      />
      <div class="w-full text-center lg:w-2/3">
        <Heading1 class="text-red-500 dark:text-red-500">
          404 NOT FOUND
        </Heading1>
        <p class="mb-8 leading-relaxed dark:text-gray-300">
          Oops, looks like you got kidnapped by aliens.
        </p>
        <div class="flex justify-center">
          <RouterLink :to="{ name: 'Home' }">
            <ButtonPrimary> Bring me back Home </ButtonPrimary>
          </RouterLink>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { Icon as iconifyIcon2 } from '@iconify/vue2'
import { moveBallWithAnimation } from '@l-packages/collection-tools'
export default {
  name: 'NotFound',
  components: { iconifyIcon2 },
  methods: {},
  mounted() {
    console.log(moveBallWithAnimation)
  }
}
</script>
